import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {getInterviewTitleAsync} from "../store/modules/interviewStore";
import {Tree} from "antd";
import TypeSelect from "../components/TypeSelect";
import PageHeader from "../components/PageHeader";

function Interviews(props) {
    const dispatch = useDispatch();
    const {interviewTitleList} = useSelector(state => state.interview)
    const [treeList, setTreeList] = useState([])
    useEffect(() => {
        if (!interviewTitleList.length) {
            dispatch(getInterviewTitleAsync());
        }
        // 因为redux的异步请求，所以第一次打印为空，知道获取后才会重新触发依赖 获取数据
        if (interviewTitleList.length) {
            // 异步获取数据都会先用一个空数组占位，然后获取到数据后，再将数据赋值给空数组，设置给响应式变量
            const arr = []
            interviewTitleList.forEach(item => {
                arr.push({
                    title: item.title,
                    key: item._id,
                    children: item.children?.map(item => {
                        return {
                            title: item.title,
                            key: item._id
                        }
                    })
                })
            })
            setTreeList(arr)
        }
    }, [interviewTitleList])
    const onSelect = (value) => {
        // value 为节点的 key
        console.log(value)
    }
    return (
        <div>
            <PageHeader title="面试题汇总"></PageHeader>
            <div style={{width: 300}}>
                <Tree
                    treeData={treeList}
                    onSelect={onSelect}
                />
            </div>

        </div>
    );
}

export default Interviews;